<template>
	<view class="block">

		<view class="wheel flex_c" :style="`background: url(${$util.prefix('live/wheel_2025_bg.png')}) 0 0 no-repeat;`">

			<view class="people_list">
				<!-- <scroll-view scroll-x="true">
					<view class="people_content flex_center">
						<view class="item flex_c" v-for="(item,index) in people_list" :key="index"
							@click="onSelectPeople(item.userId)">
							<view class="avatar flex_r_around">
								<image class="user_avatar" :src="item.avatarUrl" mode="aspectFill"></image>
								<image :src="$util.prefix('live/wheel_2025_people_select.png')" class="select_image"
									v-show="to_uid == item.userId"></image>
							</view>
							<text class="hidden" :id="to_uid == item.userId ? 'select' : ''">{{ item.userName }}</text>
						</view>
					</view>
				</scroll-view> -->
			</view>

			<view class="notice flex_r_around">
				<u-notice-bar color="#FFFFFF" bgColor="transparent" :text="notice" direction="column"></u-notice-bar>
			</view>

			<view class="luckwheel">
				<LuckyWheel :blocks="blocks" :prizes="prizes" :buttons="buttons" ref="LuckDraw"
					@start="startCallBack(1)" @end="endCallBack" :default-config="defaultConfig" />
			</view>

			<view class="start_btn flex_r_between">
				<image :src="$util.prefix('live/wheel_2025_start1.png')" @click="startCallBack(1)"></image>
				<image :src="$util.prefix('live/wheel_2025_start10.png')" @click="startCallBack(5)"></image>
				<image :src="$util.prefix('live/wheel_2025_start50.png')" @click="startCallBack(10)"></image>
			</view>

			<view class="gold_box flex_r_between">
				<view class="left flex_center">
					<image src="/static/recharge/gold_coins.png"></image>
					<text>我的金币：{{ balance || 0 }}</text>
				</view>
				<view class="right flex_center" @click="$native.toRecharge()">
					<text>充值</text>
					<u-icon name="arrow-right" size="24rpx" color="#FFF"></u-icon>
				</view>
			</view>

			<view class="loading flex_c" v-if="!loaded">
				<HevuLoading type="loading2" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
					loadingIconColor="#FD2A53" />
				<view style="height: 60rpx;"></view>
				<ProgressBar :Width="percent" Type="candy"></ProgressBar>
			</view>

			<view class="tags_list flex_c">
				<view class="tags flex_r_around" @click="openList">
					<text>送礼记录</text>
				</view>

				<view class="tags flex_r_around" @click="rich_modal = true">
					<text>中奖规则</text>
				</view>

				<view class="tags flex_r_around" @click="agree_modal = true">
					<text>法律声明</text>
				</view>
			</view>

			<wLoading ref="loading"></wLoading>

			<view @touchmove.stop.prevent="preventHandler">
				<u-popup :show="model" @close="model = false" mode="center" bgColor="transparent"
					:safeAreaInsetBottom="false">
					<view class="success flex_c">

						<image class="title" :src="$util.prefix('extension/wheel_success_title.png')" mode="aspectFill">
						</image>

						<view class="grid">
							<u-grid :border="false" :col="getCol()">
								<u-grid-item v-for="(item,index) in success_list" :key="index">
									<view class="item flex_c">
										<image :src="item.img" mode="widthFix"></image>
										<view class="price flex_center">
											<i>×</i>
											<text>{{ item.num }}</text>
										</view>
									</view>
								</u-grid-item>
							</u-grid>
						</view>

						<view class="all_price">
							总计: {{ all_price }}金币
						</view>

						<view class="btn" @click="beginAgain(num)">
							再送 {{ num }} 次</view>
					</view>
				</u-popup>
			</view>

			<!-- 规则 -->
			<view @touchmove.stop.prevent="preventHandler">
				<u-popup :show="rich_modal" @close="rich_modal = false" mode="bottom" bgColor="transparent"
					:safeAreaInsetBottom="false">

					<view class="bottom_popup flex_c bottom_popup2">
						<view class="popup_content">
							<scroll-view scroll-y="true">
								<view class="rich">
									<view class="text">
										1.圆梦2025是超圈推出的趣味玩法，用户在赠送礼物页面或活动页面为主播赠送圆梦2025抽。每个有圆梦2025抽100金币。
									</view>
									<view class="text">
										2.圆梦2025是本旨为娱乐，请理性消费。严禁未成年人参与本活动。圆梦2025抽中的礼物直接送给选中的主播，不到用户背包。严禁任何人利用本多动进行博彩等一切违法活动。
									</view>
									<view class="text">
										3.用户参与趣味活动，送一个圆梦2025可增加10财富等级。
									</view>
									<view class="text">
										4.参与本活动时，可选择赠送一个，赠送10个，赠送50个。选择赠送多个时，赠送的结果累计显示。
									</view>
									<view class="text">
										5.圆梦2025奖品规格，数量如下：
									</view>
									<view class="table">
										<view class="header flex_center">
											<view class="item flex_r_around">
												<text>礼物</text>
											</view>
											<view class="item flex_r_around">
												<text>礼物价值(金币)</text>
											</view>
											<view class="item flex_r_around" id="no_right">
												<text>奖品数量(个)</text>
											</view>
										</view>
										<view class="table_list flex_center" v-for="(item,index) in prizeList"
											:key="index" :id="index == (prizeList.length-1) ? 'no_bottom' : ''">
											<view class="item flex_center">
												<image :src="item.img" mode="aspectFill"></image>
												<text class="hidden">{{ item.name }}</text>
											</view>
											<view class="item flex_r_around">
												<text>{{ Number(item.gold_price).toFixed(0) }}</text>
											</view>
											<view class="item flex_r_around" id="no_right">
												<text>{{
													index == 0 ? 2100
													: index == 1 ? 2267
													: index == 2 ? 3225
													: index == 3 ? 2000
													: index == 4 ? 300
													: index == 5 ? 100
													: index == 6 ? 4
													: 2
												}}</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>

				</u-popup>
			</view>

			<!-- 记录 -->
			<view @touchmove.stop.prevent="preventHandler">
				<u-popup :show="list_modal" @close="list_modal = false" mode="bottom" bgColor="transparent"
					:safeAreaInsetBottom="false">

					<view class="bottom_popup flex_c bottom_popup1">
						<view class="popup_content">
							<scroll-view :scroll-y="true" @scrolltolower="onReach">
								<view class="list">
									<view class="item flex_center" v-for="(item,index) in list" :key="index">
										<view class="left flex_center">
											<!-- <view class="avatar">
												<image :src="item.to_avatar" mode="aspectFill"></image>
											</view> -->
											<view class="text">
												<view class="name hidden">抽中了 {{ item.prize_name }}</view>
												<view class="info flex_center">
													<text>总价值</text>
													<i>{{ item.prize_gold_price }}</i>
													<text>金币</text>
												</view>
												<view class="time hidden">
													<uni-dateformat :date="item.create_time*1000"
														format="yyyy-MM-dd"></uni-dateformat>
												</view>
											</view>
										</view>
										<view class="right">
											<image :src="item.gift_img" mode="aspectFill"></image>
										</view>
									</view>
								</view>
								<view class="loading_block" v-if="total > list.length">
									<u-loading-icon mode="semicircle" color="#FFF"></u-loading-icon>
								</view>
							</scroll-view>
						</view>
					</view>

				</u-popup>
			</view>

			<!-- 规则 -->
			<view @touchmove.stop.prevent="preventHandler">
				<u-popup :show="agree_modal" @close="agree_modal = false" mode="bottom" bgColor="transparent"
					:safeAreaInsetBottom="false">

					<view class="bottom_popup flex_c bottom_popup3">
						<view class="popup_content">
							<scroll-view scroll-y="true">
								<view class="rich">
									<view class="text">
										1.活动期间，用户应当遵守法律法规及平台规则，如发现用户违规(包括但不限于使用外挂作弊、恶意套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理
									</view>
									<view class="text">
										2.任何人不得利用本次活动进行博彩或其他违法行为，对于本平台用户，一经发现，本平台将立即取消用户参与资格并收回所得奖励。如行为构成犯罪，将移交司法机关处理。如给平台造成其他损失，同时应当承担赔偿责任
									</view>
									<view class="text">
										3.平台严禁并严厉打击任何以盈利为目的的线下非法交易行为任何人以本平台名义宣称或从事类似活动或恶意发放、转让、回收、奖励、欺诈等造成用户损失的，本平台无需为此承担任何法律责任
									</view>
									<view class="text">
										4.因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非平台所能控制的原因导致的用户无法参与活动、或参与失败，平台无需为此承担任何法律责任
									</view>
									<view class="text">
										5.平台可以根据本活动的实际情况，在法律允许的范围内，为保障消费者的权益，对活动规则进行变动或调整，相关变动或调整将公布在活动页面上，并于公布时即时生效
									</view>
									<view class="text">
										6.如对活动规则或其他有任何问题，请联系在线客服咨询
									</view>
									<view class="text">
										7.仅限18岁及以上用户参加，禁止未成年充值、打赏行为
									</view>
									<view class="text">
										8.适度参与活动，合理安排时间避免过度沉迷
									</view>
									<view class="text">
										9.本活动与Apple Inc,无关。
									</view>
								</view>
							</scroll-view>
						</view>
					</view>

				</u-popup>
			</view>

		</view>
	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import navBar from '@/compentents/navBar/navBar.vue'
	export default {
		data() {
			return {
				notice: [],

				defaultConfig: {
					gutter: '0',
					speed: 10,
					accelerationTime: 3000,
					decelerationTime: 3000,
				},

				buttons: [{
					radius: '30px',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
						width: "160%",
						top: '-160%'
					}],
					fonts: [{
							text: '点击',
							top: '-60%',
							fontSize: 16,
							fontWeight: 600,
							fontColor: '#C633B3',
						},
						{
							text: '抽奖',
							top: '10%',
							fontSize: 16,
							fontWeight: 600,
							fontColor: '#C633B3',
						},
					]
				}],

				blocks: [{
					padding: '16px',
					background: '#DCDBDA',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
						width: "100%",
					}],
				}, ],

				prizes: [],
				prizeList: [],


				// 剩余次数
				haveNum: 0,
				// 防连点
				isable: true,

				// 图片预加载 数组
				load_image: [
					// 总背景
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_2025_bg.png',
					// 转盘背景
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_circle_bg.png',
					// 抽奖按钮(指针)
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_btn.png',
					// 按钮
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_2025_start50.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_2025_start10.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_2025_start1.png',
					// 弹窗
					'https://qiniu-cdn.maeiyun.com//h5static/extension/wheel_success_title.png',

					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_agree.png',
					
					'https://qiniu-cdn.maeiyun.com//h5static/live/wheel_2025_people_select.png',
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				tab: 1,

				model: false,

				success_list: [],
				all_price: 0,


				list: [],
				total: 0,
				page: 1,
				// 规则
				rich_modal: false,
				// 记录
				list_modal: false,
				// 法律
				agree_modal: false,

				balance: 0,

				num: 1,
				
				to_uid: 0,
				rid: 0,
				
				toast: false,
				people_list: [],
				
			}
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},

			// haveNum: function(val, old) {
			// 	if (this.haveNum == 0) {
			// 		this.buttons[0].fonts[0].text = `参与推广`;
			// 		this.buttons[0].fonts[1].text = `获取次数`;
			// 	} else {
			// 		this.buttons[0].fonts[0].text = `剩余${this.haveNum}次`;
			// 		this.buttons[0].fonts[1].text = `抽奖`;
			// 	}
			// },
		},

		components: {
			LuckyWheel,
			HevuLoading,
			ProgressBar,
			wLoading,
			navBar,
		},

		methods: {

			getCol() {
				if (this.success_list.length == 1) {
					return 1;
				} else if (this.success_list.length <= 4 && this.success_list.length > 1) {
					return 2;
				} else {
					return 4;
				}
			},

			getNotice() {
				this.$get('/active.dreamPrizeV3/getPrizeLog', {
					page: 1,
					limit: 100
				}).then(res => {
					res.data.data.forEach(element => {
						this.notice.push(`${element.nickname}获得了${element.prize_name}`);
					});
				});
			},

			setInit() {
				for (var i = 0; i < this.prizeList.length; i++) {
					var element = this.prizeList[i];
					this.prizes.push({
						id: element.id,
						name: element.name,
						fonts: [{
							text: `${element.name}`,
							top: '14%',
							fontColor: '#A53BFF',
							fontSize: 12,
						}],
						imgs: [{
							src: element.img,
							width: '36%',
							top: '36%'
						}],
						background: i % 2 == 0 ? '#F2E5FF' : '#FFF'
						// background: '#FE5072'
					});
				}
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}

			},

			onTab(e) {
				this.tab = e;
			},

			beginAgain(num) {
				this.model = false;
				this.startCallBack(num);
			},

			startCallBack(num) {

				// if (this.haveNum == 0) {
				// 	this.$nextTick(() => {
				// 		uni.pageScrollTo({
				// 			scrollTop: 0
				// 		});
				// 	});
				// }

				// 开始旋转
				if (!this.isable) {
					return;
				}
				this.num = num;
				this.isable = false;
				this.$refs.loading.open();
				this.$post('/active.dreamPrizeV3/setPrize', {
					num: num,
					to_uid: this.to_uid,
					rid: this.rid
				}, true, () => {
					this.isable = true;
					this.$refs.loading.close();
				}).then(res => {
					this.$refs.loading.close();
					this.success_list = res.data.prize_list;
					this.getAllPrice();
					this.$refs.LuckDraw.play();
					// 模拟请求接口2s后返回数据
					setTimeout(() => {
						const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[
							0].id);
						// 得到中奖索引, 开始缓慢停止
						this.$refs.LuckDraw.stop(index);
					}, 2000);
				})

			},

			endCallBack(prize) {
				this.open();
				this.getInit();
				this.getBlance();
				// this.$native.sendGiftSuccess(this.success_list);
			},

			getInit() {
				this.$post('/active.dreamPrizeV3/getInitInfo').then(res => {
					this.haveNum = res.data.haveNum;
					this.isable = true;
					this.$refs.loading.close();
					this.prizeList = res.data.prizeList;
					if (!this.prizes.length) {
						this.setInit();
					}
				});
			},

			open() {
				this.model = true;
			},

			preventHandler() {
				return;
			},

			getAllPrice() {
				var price = 0;
				this.success_list.forEach(element => {
					var item_price = element.num * element.rmb_price;
					price += item_price;
				});
				this.all_price = price * 10;
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},

			openList() {
				this.list_modal = true;
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

			getList() {
				this.$get('/active.dreamPrizeV3/getMyPrizeLog', {
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 触底
			onReach() {
				this.page++;
				this.getList();
			},
			
			// 原生交互 获取直播间麦位成员信息
			getPeopleList(list) {
				var list = JSON.parse(list);
				list.forEach(element => {
					if (element.userId) {
						this.people_list.push(element);
					}
				})
			},
			
			// 选择赠送礼物目标
			onSelectPeople(id) {
				this.to_uid = id;
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.to_uid = option.to_uid || 0;
			this.rid = option.rid;
			this.getNotice();
			this.preLoad();
			this.getInit();
			this.getBlance();
			
			window.getPeopleList = this.getPeopleList;
			this.$native.getPeopleList();
			
			// 模拟数据
			// for (var i = 0; i < 100; i++) {
			// 	this.people_list.push({
			// 		"avatarUrl": 'http://qiniu-cdn.maeiyun.com/storage/xy/picture/20250115/194348422c593f0002a315173a406831.jpg',
			// 		"userName": '主播昵称' + i,
			// 		"userId": 44 + i
			// 	})
			// }
			
		}
	}
</script>

<style lang="less" scoped>
	.wheel {
		width: 100vw;
		border-radius: 80rpx 80rpx 0 0;
		background-size: 100% !important;
		padding-bottom: 40rpx;
		background-color: #6DC1FF !important;
	}

	.list_btn {
		padding: 280rpx 0 20rpx 20rpx;
		position: absolute;
		top: 200rpx;
		right: 0;
		z-index: 10;

		text {
			width: 44rpx;
			background: linear-gradient(117deg, #C1AEFF 0%, #247FFF 100%);
			border-radius: 24rpx 0rpx 0rpx 24rpx;
			padding: 12rpx 0;
			font-size: 24rpx;
			color: #FFF;
			line-height: 26rpx;
			text-align: center;
		}
	}
	
	.people_list {
		overflow: hidden;
		height: 122rpx;
		margin: 158rpx 0 0;
		width: 680rpx;
	
		.people_content {
			.item {
				width: 112rpx;
				flex-shrink: 0;
	
				.avatar {
					position: relative;
					width: 72rpx;
					height: 72rpx;
	
					.user_avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 40rpx;
					}
	
					.select_image {
						width: 72rpx;
						height: 72rpx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
					}
	
				}
	
				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFF;
					line-height: 34rpx;
					max-width: 100%;
				}
	
				#select {
					color: #366CFF;
				}
			}
		}
	}

	.notice {
		width: 560rpx;
		height: 66rpx;
		background: linear-gradient(90deg, #390FF8 0%, #3C79FD 100%);
		border-radius: 40rpx;
		border: 1rpx solid #FFF;
		box-shadow: 0 8rpx 0 0px #390FF8;
		margin: 20rpx 0 20rpx;

		/deep/ .u-notice-bar {
			padding: 10rpx 36rpx;
		}
	}

	.start_btn {
		width: 100%;
		padding: 24rpx 48rpx 24rpx;

		image {
			width: 200rpx;
			height: 108rpx;
		}
	}

	.loading {
		position: fixed;
		z-index: 30;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		padding-top: 20vh;
	}

	.tab_content {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 82rpx 44rpx 62rpx;
		margin-top: 60rpx;
		position: relative;

		.tab {
			position: absolute;
			width: 686rpx;
			top: -48rpx;
			left: 0;
			padding: 0 46rpx;

			.item {
				width: 288rpx;
				height: 96rpx;

				image {
					width: 288rpx;
					height: 96rpx;
				}

			}
		}
	}

	.card {
		background: hsla(224, 98%, 61%, 0.5);
		border-radius: 24rpx;
		opacity: 0.5;
		padding: 28rpx 0 26rpx;

		text {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
		}

		view {
			margin-top: 8rpx;
			font-weight: 600;
			font-size: 56rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}

	}

	.success {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 56rpx 54rpx 50rpx;

		.title {
			width: 324rpx;
			height: 32rpx;
			margin-bottom: 60rpx;
		}

		.grid {
			width: 100%;

			/deep/ .u-grid-item--hover-class {
				opacity: 1;
			}

			.item {
				width: 100%;

				.price {
					align-items: flex-end;
					padding: 8rpx 0 26rpx;

					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
					}

					i {
						font-weight: 600;
						font-size: 24rpx;
						color: #131313;
						font-style: normal;
					}
				}

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}
		}

		.all_price {
			font-size: 28rpx;
			color: #7B7690;
			line-height: 40rpx;
			padding: 20rpx 0 40rpx;
		}

		.btn {
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #4542FF 0%, #9F64FA 100%);
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFBDC;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.gold_box {
		width: 644rpx;
		height: 64rpx;
		background: #3912F9;
		border-radius: 32rpx;
		margin-top: 12rpx;
		padding: 0 24rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.right {
			width: 112rpx;
			height: 44rpx;
			background: #FF7A05;
			border-radius: 24rpx;
			padding: 0 0rpx 0 18rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 8rpx;
				line-height: 44rpx;
			}
		}
	}

	.tags_list {
		position: fixed;
		z-index: 2;
		top: 400rpx;
		right: 0;

		.tags {
			width: 152rpx;
			height: 56rpx;
			margin-bottom: 12rpx;
			background: linear-gradient(90deg, #390FF8 0%, #3C79FD 100%);
			border-radius: 28rpx 0rpx 0rpx 28rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

	}

	.bottom_popup {
		height: 85vh;
		width: 100vw;

		padding: 120rpx 40rpx 40rpx;
		background-color: #FFF;
		border-radius: 42rpx 42rpx 0 0;

		.popup_content {
			flex: 1;
			overflow: hidden;

			scroll-view {
				height: 100%;
				border-radius: 24rpx;
				overflow: hidden;
			}

			.rich {
				padding: 48rpx 40rpx;
				min-height: 100%;

				.text {
					font-size: 26rpx;
					color: #6329A7;
					line-height: 36rpx;
				}

				.table {
					width: 600rpx;
					background: #E7E0FD;
					border-radius: 16rpx;
					border: 2rpx solid #A491FF;
					overflow: hidden;
					margin-top: 18rpx;

					.header {
						.item {
							flex: 1;
							overflow: hidden;
							height: 72rpx;
							border-right: 2rpx solid #A491FF;
							border-bottom: 2rpx solid #A491FF;

							text {
								font-size: 26rpx;
								color: #480A8F;
								line-height: 36rpx;
							}
						}
					}

					.table_list {
						.item {
							flex: 1;
							overflow: hidden;
							height: 72rpx;
							background: #FFFFFF;
							border-right: 2rpx solid #A491FF;
							border-bottom: 2rpx solid #A491FF;

							image {
								width: 36rpx;
								height: 36rpx;
								margin: 0 12rpx 0 16rpx;
							}

							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #480A8F;
								line-height: 32rpx;
							}
						}
					}

					#no_right {
						border-right: 0;
					}

					#no_bottom {
						border-bottom: 0;
					}
				}
			}

			.list {
				width: 670rpx;

				.item {
					overflow: hidden;
					padding: 24rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #C9C1E2;

					.left {
						flex: 1;
						overflow: hidden;

						.avatar {
							margin-right: 24rpx;
							width: 100rpx;
							height: 100rpx;

							image {
								width: 96rpx;
								height: 96rpx;
								border-radius: 48rpx;
								border-radius: 4rpx solid #C3A1FF;
							}
						}

						.text {
							flex: 1;
							overflow: hidden;

							.name {
								font-weight: 500;
								font-size: 30rpx;
								color: #6329A7;
								line-height: 32rpx;
							}

							.info {
								margin: 4rpx 0;

								text {
									font-size: 26rpx;
									color: #6329A7;
									line-height: 32rpx;
								}

								i {
									font-size: 26rpx;
									color: #FA1BFF;
									line-height: 32rpx;
									font-style: normal;
								}
							}

							.time {
								font-size: 24rpx;
								color: rgba(99, 41, 167, 0.6);
								line-height: 34rpx;
							}
						}
					}

					.right {
						width: 96rpx;
						height: 96rpx;
						margin-left: 20rpx;

						image {
							width: 96rpx;
							height: 96rpx;
						}
					}
				}
			}
		}
	}

	.bottom_popup1 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_list.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FFF;
	}

	.bottom_popup2 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_rich.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FFF;
	}

	.bottom_popup3 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/live/popup_bg_agree.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FFF;
	}
</style>